JSHintでJavascriptの構文チェック&Sublime Text2でのチェック

developer tools

#JavaScript

#Sublime Text

中村修太

2013.04.05

この記事は公開されてから1年以上経過しています。情報が古い可能性がありますので、ご注意ください。

JSHint

JSHintとは、Javascript用構文チェッカーです。
構文チェッカーとしては、かなり厳しめのチェックをしてくれるJSLintがありますが、
これをforkして融通効くようにしたものがJSHintです。
詳しい経緯はここに。

とりあえずどんなチェックをしてくれるか知りたい場合、このサイトでJavascriptのコード入力すれば、
どのようなチェックをしてくれるかわかります。
今回はコマンドラインからJSHintを使ってみたり、Sublime Text2から使ってみましょう。

環境構築方法

今回使用した動作環境は以下のとおりです。

OS : MacOS X 10.7.4
Node.js : v0.10.0
npm : 1.2.14
Grunt : 0.4

npmを使用してJSHintをインストールします。
このモジュールはグローバルオプションをつけてインストールしましょう。

% npm install -g jshint

コマンドラインでJSHintを使う

JSHintの設定はホームディレクトリに置かれた.jshintrcファイルにしたがってチェックします。
チェック内容の詳細はここで確認してもらうとして、とりあえず下記の.jshintrcファイルをおいておきましょう。下記ルールに従っていないjsファイルは警告が出ます。

{
  "indent" : 2,      // インデント
  "camelcase":true,  // キャメルケース
  "maxlen" : 80,     // 一行の最大文字数
  "unused" : true,   // 宣言のみで使用していない変数を検出
  "eqeqeq":true,     // ==、!=の使用禁止
  "undef" : true,    // グローバル変数へのアクセスを禁止
  "devel" : true     // console、alertを許可
}

.jshintrcを記述したら、チェック対象になるfoo.jsファイルを作成します。

function x(a,b) {
 return a + b;
}

res = x(10,20);
console.log("res = " + res);

jshintを実行してみてください。先ほどの設定に応じた、いくつかの警告が出ます。

% jshint foo.js                               
foo.js: line 2, col 2, Expected 'return' to have an indentation at 3 instead at 2.
foo.js: line 5, col 1, 'res' is not defined.
foo.js: line 6, col 24, 'res' is not defined.

Sublime Text2でJSHintによるチェックを行う

jshintコマンドを使えば構文チェックは出来ましたが、いちいちコマンドを入力してチェックするのは面倒です。
SublimeLinterというパッケージを使用すると、JSHintによるチェックをエディタ上で確認することができます。

まずは、Sublime Text2のパッケージコントロール(Shit + Command + p)を起動し、
インストール(Package Controll:Install Package)を選択しましょう。
そこで、SublimeLinterを選択してインストールします。
sublime-linter

次に、メニューからSublimeLinterの設定画面を開きます。
linter1

設定画面では、次の記述をしてください。JSHintのルールは、ホームディレクトリの.jshintrcが参照されます。

{
    "sublimelinter_delay": 0.3,
    // If true, lines with errors or warnings will have a gutter mark.
    "sublimelinter_gutter_marks": true,

    // If true, the find next/previous error commands will wrap.
    "sublimelinter_wrap_find": true,

    // Use ~/.jshintrc instead
    "jshint_options": {}
}

では、先ほどのfoo.jsを開いてみましょう。JShintによる警告が一目でわかりますね。ソースを修正すれば、すぐに警告も修正されます。
linter2